<template>
  <div class="main-conent-screen">
    <div v-if="$slots.header" class="screen-header">
      <slot name="header"></slot>
    </div>
    <div v-else class="screen-padding" />

    <div ref="conentRef" class="screen-conent">
      <a-table
        bordered
        :row-key="rowKey"
        :columns="columnsRest"
        :data-source="dataSource"
        :loading="loading"
        :pagination="false"
        :scroll="{ scrollToFirstRowOnChange: true, y: tableScrollY }"
      >
        <slot></slot>
      </a-table>
    </div>

    <div v-if="pagination" class="screen-footer">
      <a-pagination
        :total="pagination.total"
        :current="pagination.current"
        :page-size="pagination.pageSize"
        :show-size-changer="pagination.showSizeChanger"
        :show-quick-jumper="pagination.showQuickJumper"
        @change="pagination.onChange"
      />
    </div>
    <div v-else class="screen-padding" />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
import debounce from 'lodash.debounce'
import { PaginationConfig } from './data.d'

export default defineComponent({
  name: 'ScreenTable',
  props: {
    rowKey: {
      type: String,
      default: '',
    },
    columns: {
      type: Array,
      required: true,
    },
    dataSource: {
      type: Array,
      default: () => {
        return []
      },
    },
    loading: {
      type: Boolean,
    },
    pagination: {
      type: Object as PropType<PaginationConfig | false | undefined>,
      default: () => {
        return {}
      },
    },
  },
  setup(props, { slots }) {
    const columnsRest = computed<any>(() => {
      return props.columns.map((item: any) => {
        if (item['slots'] && item['slots']['customRender']) {
          item['customRender'] = slots[item['slots']['customRender']]
        }
        return item
      })
    })

    const tableScrollY = ref<number>(0)
    const conentRef = ref<HTMLDivElement>()

    const resizeHandler = debounce(() => {
      if (conentRef.value) {
        tableScrollY.value =
          conentRef.value.offsetHeight - conentRef.value.getElementsByClassName('ant-table-thead')[0].clientHeight - 2
      }
    }, 100)

    onMounted(() => {
      resizeHandler()

      window.addEventListener('resize', resizeHandler)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeHandler)
    })

    return {
      conentRef,
      tableScrollY,
      columnsRest,
    }
  },
})
</script>
<style lang="less" scoped>
.main-conent-screen {
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px - 50px);
  background-color: #fff;
  border-radius: 4px;

  .screen-header {
    min-height: 33px;
    padding: 20px;
  }

  .screen-footer {
    min-height: 32px;
    padding: 20px;
    text-align: right;
  }

  .screen-conent {
    flex: 1;
    padding: 0 20px;
    overflow: hidden;
  }

  .screen-padding {
    padding-top: 20px;
  }

  :deep(.ant-table.ant-table-bordered) > .ant-table-content {
    border-bottom: 1px solid #f0f0f0;
  }
}
</style>
